<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zss
 * @Date: 2024-07-08 08:59:38
 * @LastEditors: swc
 * @LastEditTime: 2024-12-19 14:49:49
-->

<template>
  <div
    id="container"
    class="home-page-main y-scroll"
    :class="isOldDevice ? 'old-device' : 'new-device'"
  >
    <!-- <div class="home-config" @click="homeConfigBox = true">
      <Tooltip
        :content="$srv.getI18nByPath('homePage.homeConfig')"
        placement="left"
      >
        <i class="wy-icon wy-anjian"></i>
      </Tooltip>
    </div> -->
    <vue-draggable
      v-model="showArray"
      force-fallback="true"
      animation="500"
      class="vue-draggable"
      :class="isOldDevice && 'old-device-bg'"
      delay="10"
      @end="dragEnd"
    >
      <template v-for="sa in showArray">
        <component
          :is="GetCustomName(sa.ftypeid, sa.homepage_custom_component_types)"
          :key="sa.id"
          :ffieldwidth="sa.ffieldwidth"
          :fheight="sa.fheight"
          :compBoxInfo="compBoxInfo"
          class="vue-draggable-com-box"
        ></component>
      </template>
      <!-- <home-nav /> -->
    </vue-draggable>
    <Drawer
      :closable="false"
      v-model="homeConfigBox"
      width="300"
      class="home-config-drawer"
      @on-visible-change="drawerChange"
    >
      <div slot="header">
        <i class="wy-icon wy-bangong"></i>
        <!-- <span class="header-span">配置首页展示面板</span> -->
        <span class="header-span">{{
          $srv.getI18nByPath('homePage.homeConfigPanel')
        }}</span>
      </div>
      <div class="y-scroll">
        <Card v-for="(sa, idx) in configShowArray" :key="idx" dis-hover>
          <p slot="title">
            {{ $srv.getI18nBySrv(titles.get(sa[0].ftypeid).f_text) }}
          </p>
          <div v-for="s in sa" :key="s.id" class="check-box-div">
            <Checkbox :value="s.isShow" @on-change="checkboxClick($event, s)">
              {{ $srv.getI18nBySrv(s.f_name || s.title) }}
            </Checkbox>
            <!-- <p>排序号:{{ s.fsn }}</p> -->
          </div>
        </Card>
      </div>
      <div class="home-config-btns">
        <Button
          :type="okBtnIsDisabled ? 'default' : 'primary'"
          :disabled="okBtnIsDisabled"
          :class="{
            disabled: okBtnIsDisabled
          }"
          @click="okHideDrawer"
        >
          {{ $srv.getI18nByPath('others.ok') }}
        </Button>
        <Button @click="homeConfigBox = false">
          {{ $srv.getI18nByPath('others.cancel') }}</Button
        >
      </div>
    </Drawer>
  </div>
</template>

<script lang="ts">
import {
  Tsrv,
  T_srv,
  ifs,
  ts,
  vue,
  vueDraggable,
  I_cmd,
  T_cmd
} from './config';
// import './homeCpt/index';
import homeNav from './homeCpt/homeNav.vue';
import messageList from './homeCpt/o-message-list/index.vue';

@T_srv.comp({
  components: {
    vueDraggable,
    homeNav,
    messageList
  }
})
export default class homePage extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({})
  isOldDevice: boolean;

  @T_srv.getter('UserID') userID: number;

  /* 组件名 */
  private name: string = 'homePage';

  private funName: string = '';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  private homeConfigBox: boolean = false;

  private showArray: any[] = [];

  private cloneConfigShowArray: any = null;

  private configShowArray: object = {};

  private changeData = { add: [], del: [] };

  private titles: Map<number, any> = new Map();

  private homeCustomTypeTitles: Map<number, any> = new Map();

  get okBtnIsDisabled() {
    // 加号运算优先级高于全等判断
    return this.changeData.add.length + this.changeData.del.length === 0;
  }

  // 对应子组件
  get GetCustomName() {
    return (ftypeid: number, homeCustomType: number) => {
      const coms: { [key: number]: string } = {
        1: 'homeCustom',
        2: 'homeSysInfo',
        3: 'homeChart',
        4: 'homeRank',
        5: 'homeBanner',
        6: 'homeWorkTips',
        7: 'homeCard'
      };
      const custom: { [key: number]: string } = {
        1: 'homeNav',
        2: 'homeTool',
        3: 'messageList'
      };
      if (ftypeid === 1 && homeCustomType) {
        return custom[homeCustomType];
      }
      if (!Tsrv.utils.has(coms, `${ftypeid}`)) {
        return coms[1];
      }
      return coms[ftypeid];
    };
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    // this.showGraph();
    this.init();
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private async init() {
    await this.getTitles();
    // this.filterByPms(await this.getShowArray(await this.getConfigShowArray()));
  }

  // 获取字段下拉列表组件名
  private getTitles() {}

  // 拖拽结束事件
  private dragEnd(a: any) {
    const updateRecords = [];
    if (a.newIndex === a.oldIndex) {
      return;
    }
    const L_startInex = Math.min(a.newIndex, a.oldIndex);
    const L_endInex = Math.max(a.newIndex, a.oldIndex);
    this.showArray.forEach((e: any, idx: number) => {
      if (L_startInex <= idx && idx <= L_endInex) {
        const L_d = [];
        if (idx === 0) {
          e.fsn = 1;
          L_d.push({
            field: 'fsortno',
            value: 1
          });
        } else {
          const L_idx = this.showArray[idx - 1].fsn + 1;
          e.fsn = L_idx;
          L_d.push({
            field: 'fsortno',
            value: L_idx
          });
        }
        L_d.push({
          field: 'id',
          value: e.shpsuId
        });
        updateRecords.push(L_d);
      }
    });

    updateRecords.length > 0 &&
      this.GT_command.saveConfigShowArray(updateRecords);
  }

  // 显示状态发生变化时触发
  private drawerChange(P_sw: boolean) {
    if (P_sw) {
      this.cloneConfigShowArray = Tsrv.utils.clone(this.configShowArray, true);
    } else {
      if (!this.okBtnIsDisabled) {
        this.configShowArray = this.cloneConfigShowArray;
        this.changeData = { add: [], del: [] };
      }
    }
  }

  private checkboxClick(P_sw: Array<boolean>, sa: any) {
    if (!P_sw) {
      let L_sw = true;
      for (let i = 0; i < this.changeData.add.length; i++) {
        if (this.changeData.add[i].id === sa.id) {
          this.changeData.add.splice(i, 1);
          L_sw = false;
          return;
        }
      }
      if (L_sw) {
        this.changeData.del.push(sa);
      }
    } else {
      let L_sw = true;
      for (let i = 0; i < this.changeData.del.length; i++) {
        if (this.changeData.del[i].id === sa.id) {
          this.changeData.del.splice(i, 1);
          L_sw = false;
          return;
        }
      }
      if (L_sw) {
        this.changeData.add.push(sa);
      }
    }
    sa.isShow = !sa.isShow;
  }

  private okHideDrawer() {
    const removeRecords = [];
    this.changeData.del.forEach((e: any) => {
      removeRecords.push(e.shpsuId);
    });
    const insertRecords = {
      data: []
    };
    this.changeData.add.forEach((e: any, idx: number) => {
      insertRecords.data.push([
        {
          field: 'fsortno',
          value:
            this.showArray.length > 0
              ? this.showArray[this.showArray.length - 1].fsn + idx + 1
              : idx + 1
        },
        { field: 'master_bill_id', value: e.id },
        { field: '_sys_user_id', value: Tsrv.getUserID() }
      ]);
    });
    // this.save(this.tableName, { removeRecords, insertRecords });
    this.changeData = { add: [], del: [] };
    this.homeConfigBox = false;
  }
}
</script>
<style lang="scss" scoped>
#container {
  // background-color: var(--main-content-bg-color);
  background-color: #f1f1f1;
}
.home-page-main {
  background-color: var(--main-container-bgColor);
  width: 100%;
  height: 100%;
  .home-config {
    position: fixed;
    right: 20px;
    top: 100px;
    z-index: 105;
    width: 50px;
    height: 50px;
    background: rgba($color: #333333, $alpha: 0.38);
    border-radius: 50%;
    &:hover {
      background: rgba($color: #333333, $alpha: 0.58);
      cursor: pointer;
    }
    .ivu-tooltip {
      width: 100%;
      height: 100%;
      // /deep/.ivu-tooltip-rel {
      ::v-deep .ivu-tooltip-rel {
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 24px;
          color: rgba($color: #ffffff, $alpha: 0.68);
        }
      }
    }
  }
  .vue-draggable {
    display: flex;
    flex-wrap: wrap;
    // .vue-draggable-com-box {
    //   flex: 0 0 25%;
    //   margin-top: 5px;
    // }
    // /deep/.vue-draggable-lay-box {
    .vue-draggable-lay-box {
      .vxe-table {
        display: none;
      }
      .vxe-grid--pager-wrapper {
        display: none;
      }
      .vxe-grid--top-wrapper {
        height: calc(100% - 42px);
      }
      & {
        margin: 5px;
        overflow: hidden;
        background: #ffffff;
      }
    }
  }
  .old-device-bg {
    background: #b8d3d3;
  }
  // /deep/.home-page-box {

  ::v-deep .top-toolbar {
    margin: 8px 0px;
  }
  ::v-deep .charts .chart-group {
    border-bottom: none;
  }
}
.check-box-div:not(:first-child) {
  margin-top: 10px;
}
.wy-bangong {
  margin-right: 6px;
}
.header-span {
  font-size: 16px;
}
::v-deep .ivu-card-bordered {
  border: none;
  .ivu-card-head {
    padding: 6px 0px;
  }
  .ivu-card-body {
    padding: 10px;
  }
}
.home-config-btns {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 6px;
  background: white;
  button {
    margin: 0px 20px;
  }
}
.y-scroll {
  padding-bottom: 50px;
}
</style>
<style lang="scss">
.home-page-box {
  padding: 5px 10px;
  height: 100%;
  margin-bottom: 10px;
  background-color: #fff;
  .home-page-header {
    border-bottom: 1px solid #e8eaec;
    font-size: 15px;
    height: 36px;
    line-height: 36px;
    position: relative;
    padding-left: 12px;
    &::before {
      content: '';
      display: block;
      background-color: var(--main-container-bg-color);
      width: 4px;
      height: 60%;
      position: absolute;
      top: 20%;
      left: 0;
    }
    .home-page-header-left {
      float: left;
    }
    .home-page-header-right {
      float: right;
      font-size: 13px;
      span {
        cursor: pointer;
        i {
          font-size: 16px;
          color: inherit;
        }
      }
      a {
        font-size: 12px;
        background-color: #ed4014;
        color: #fff;
        display: inline-block;
        padding: 3px 8px;
        margin-right: 10px;
        line-height: 1.2;
        border-radius: 4px;
      }
      .button {
        margin-right: 10px;
      }
      .icon {
        color: rgb(200, 200, 200);
      }
      .iconActive {
        color: rgb(81, 90, 110);
      }
    }
  }
  .home-page-body {
    margin-top: 5px;
    height: 100%;
    .no-info img {
      width: 265px;
      display: block;
      margin: 20px auto 0 auto;
    }
  }
}
</style>
